<style scoped>
.request-list-category-slot{height: 100%;width: 100%;overflow: hidden;--text-ellipsis-row:2;}
.category{width: 90px;height: 100%;overflow-y: auto;}

/*上下的外翻圆角*/
.category_row{position: relative;width: 100%;min-height: 54px;font-weight: bold;background: var(--color-bg);color: var(--color-bg-re);--round-size: 20px;padding:0 6px;}
.category_row::before, .category_row::after {
  position: absolute;
  right: 0;
  content: '';
  width: var(--round-size);
  height: var(--round-size);
  border-radius: 100%;
  box-shadow: 0 0 0 calc(var(--round-size)/2) transparent;
  transition-duration: 0.3s;
  z-index: 1;
}
.category_row::before {
  top: calc(var(--round-size)*-1);
  clip-path: inset(50% 0 0 50%);
}
.category_row::after {
  bottom: calc(var(--round-size)*-1);
  clip-path: inset(0 0 50% 50%);
}
.category_row.on, .category_row:hover {
  background: var(--color-primary);color: var(--color-primary-re);
  transition-duration: 0.3s;
}

.category_row.on::before,
.category_row.on::after,
.category_row:hover::before,
.category_row:hover::after {
  box-shadow: 0 0 0 calc(var(--round-size)/2) var(--color-primary);
}
.list-request{height: 100%;overflow-y: auto;}
</style>
<template>
  <div class="request-list-category-slot flex">
    <div class="category">
      <div v-for="row in menu_config" class="category_row flex" :class="{on:now_category_id===row.id}" @click="set_category_id(row)">
        <p class="text text-ellipsis">{{ row.title }}</p>
      </div>
    </div>

    <RequestListSlot class="list-request max" :cols="cols" :mode="mode" :group_key="group_key" :url="url" :pull_refresh="pull_refresh" :data="request_data" :list_handle="list_handle" :load_before="load_before" :refresh_before="refresh_before">
      <template v-if="$slots.group" #group="slot_data">
        <slot name="group" v-bind="slot_data"></slot>
      </template>
      <template v-if="$slots.default" #default="slot_data">
        <slot name="default" v-bind="slot_data"></slot>
      </template>
    </RequestListSlot>
  </div>
</template>

<script lang="ts">
import type {PropType} from "vue";
// @ts-ignore
import {param_encode, to_string} from "@/js/s94_tool.js";
// @ts-ignore
import RequestListSlot from "@/components/slot/RequestListSlot.vue";

interface TypeCategory {
  title: string;
  id: string|number;
}

/**
 * @prop {*}
 */
export default {
  _title_: '请求列表-带分类',
  _tip_: '请求接口，以响应的data.list数据作列表数据循环渲染子组件，每一项作为子组件的$info，滚动加载下一页',
  _css_var_:{
    ...RequestListSlot._css_var_,
  },
  _head_img_: '',
  _group_: '容器组件',
  components: {RequestListSlot},
  props:{
    url: {
      type: String,
      _label_: '列表接口',
      _tip_: '列表数据的获取接口地址',
      _required_: true,
    },
    category_list: {
      type: Array as PropType<TypeCategory[]>,
      _label_: '分类列表',
      _tip_: '分类列表，每项必须包含title、id',
      _required_: true,
      _default_: "db_list($info,'head_img')",
      _input_type_: [{_type_:'SelectList'}],
    },
    category_field: {
      type: String,
      _label_: '分类字段',
      _tip_: '在获取项目列表请求时，分类id对应的查询条件字段，如果为空，切换分类不会刷新项目列表',
      _default_: "category_id",
    },
    category_id: {
      type: [String, Number],
      _label_: '默认分类ID',
      _tip_: '列表初始默认的分类ID，可以为空',
      _default_: "get($input,'category_id')",
    },

    cols: {
      type: [String, Number],
      _label_: '分栏数量',
      _tip_: '项目列表的分栏数量，1-5，默认为：1',
    },
    mode: {
      type: String,
      _label_: '列表模式',
      _tip_: 'round、round_list、round_row、其他。分别表示整体圆角、列表圆角、每一项圆角、无圆角',
    },
    group_key: {
      type: String,
      _label_: '分组键值',
      _tip_: '用于分组的键值，遇到对应值不同的项目会多生成一个group插槽内容',
    },

    data: [Object,String],
    pull_refresh: {
      type: Boolean,
      _label_: '下拉刷新',
      _tip_: '列表是否启用下拉刷新',
      _default_: "1",
    },

    //回到方法
    list_handle: Function,
    load_before: Function,
    refresh_before: Function,
  },
  data(){
    return {
      now_category_id: to_string(this.category_id),
    }
  },
  methods:{
    set_category_id(row:any){
      let id = to_string(row.id);
      if (this.now_category_id === id) return;
      this.now_category_id = id;
    },
  },
  watch: {
    category_id(){
      this.now_category_id = to_string(this.category_id);
    }
  },
  computed:{
    request_data(){
      let res = param_encode(this.data);
      if (this.now_category_id !== '' && this.category_field){
        res += (res?'&':'') + `where[${this.category_field}][eq]=${this.now_category_id}`
      }
      return res;
    },
    menu_config(){
      let has_empty = false;
      let res = (this.category_list ?? []).map(row=>{
        row.id = to_string(row.id);
        has_empty = has_empty || row.id === '';
        return row;
      })
      if (!has_empty) res.unshift({title:'全部', id:''});
      return res;
    },
  },
  mounted(){
  }
}
</script>